import React, { Component } from 'react';
import {
  View,
  Dimensions,
  Image
} from 'react-native';
import Carousel from 'react-native-looped-carousel';

const { width, height } = Dimensions.get('window');

export default class Hometwo extends Component {

  constructor(props) {
    super(props);

    this.state = {
      size: { width, height },
    };
  }

  _onLayoutDidChange = (e) => {
    const layout = e.nativeEvent.layout;
    this.setState({ size: { width: layout.width, height: 200 } });
  }

  render() {
    return (
      <View style={{ flex: 1 }} onLayout={this._onLayoutDidChange}>
        <Carousel
          delay={4000}
          style={this.state.size}
          autoplay
          pageInfo={false}    //在底部显示当前页面下标 / 页面个数
          bullets={true}  //显示小圆点
          bulletStyle={{backgroundColor: '#666666', width: 8, height: 2}} //未选中时小圆点的样式
          chosenBulletStyle={{backgroundColor: '#ffffff', width: 8, height: 8}}//选中时小圆点的样式
        >
        <Image source={require('../../../img/home/lun9.jpg')} style={ this.state.size} />
        <Image source={require('../../../img/home/lun6.jpg')} style={ this.state.size} />
        <Image source={require('../../../img/home/lun8.jpg')} style={ this.state.size} />
        <Image source={require('../../../img/home/lun1.jpg')} style={ this.state.size} /> 
        </Carousel>
      </View>
    );
  }
}